import React from "react";
import LifeCyclyChild from "./LifeCyclyChild.jsx";
import { Button, Input, Alert, Divider } from "antd";

class LifeCyclyParent extends React.Component {
  constructor(props) {
    super(props);
  }

  state = {
    a: 0,
    b: 0,
    show: false,
  };

  render() {
    return (
      <div style={{ padding: 8 }}>
        <h3>Class Components Life Cycle</h3>
        <Alert
          message="点击+,查看console,查看生命周期。 如果输入count,再看console,发现Child的render不会执行(shouldComponentUpdate方法测试)"
          type="success"
        />

测试 componentDidMount / componentWillUnmount<br/>
        <Button
          onClick={() => {
            console.log("--------- show/hide -------------");
            this.setState({ show: !this.state.show });
          }}
          type="primary"
        >
          {this.state.show ? "hidden child" : "show child"}
          
        </Button> 

       

            <Divider></Divider>

        {this.state.show ? (
          <div>
             测试 componentShouldUpdate / getDerivedStateFromProps / componentDidupdate <br/>
            <Button
              onClick={() => {
                console.log("---------- count+1 ------------");
                this.setState({ a: this.state.a + 1 });
              }}
              type="primary"
            >
              count+1
            </Button>
           
           
            <Input
              style={{ width: 100 }}
              onChange={(v) => {
                this.setState({ b: parseInt(v.target.value) });
              }}
              value={this.state.b}
            ></Input>{" "}
            <Button
              onClick={() => {
                console.log("-----------------------");
                this.setState({ a: this.state.b });
              }}
            >
              change b
            </Button>
            <br />
            a: {this.state.a} | b: {this.state.b}

            <Divider></Divider>
            <LifeCyclyChild count={this.state.a}></LifeCyclyChild>
          </div>
        ) : (
          <div></div>
        )}
      </div>
    );
  }
}
export default LifeCyclyParent;
